<template>
	<div id="DoughnutChartWithRoundedCorner"></div>
</template>
<!--ec官网：https://echarts.apache.org/zh/index.html-->
<script setup name="DoughnutChartWithRoundedCorner">
import {onMounted} from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
	let Echarts = echarts.init(document.getElementById('DoughnutChartWithRoundedCorner'))
	const option = {
		tooltip: {
			trigger: 'item'
		},
		legend: {
			top: '5%',
			left: 'center'
		},
		series: [
			{
				name: 'Access From',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2
				},
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '40',
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: [
					{value: 1048, name: 'Search Engine'},
					{value: 735, name: 'Direct'},
					{value: 580, name: 'Email'},
					{value: 484, name: 'Union Ads'},
					{value: 300, name: 'Video Ads'}
				]
			}
		]
	}
	// 绘制图表
	Echarts.setOption(option)
})
</script>

<style scoped></style>
